<template>

  <div class="temp">
    <div class="app repay repay-plan">

      <div class="main-content mescroll" id="mescroll">

        <div class="base-info icon-repay-base-banner">
          <div class="total-box around-flex">
            <div class="total-list around-item">
              <div class="total-item amount-money">  </div>
              <div class="total-item amount-explain">累计待还本金(元)</div>
            </div>
            <div class="total-list around-item">
              <div class="total-item amount-money"></div>
              <div class="total-item amount-explain">累计待还利息(元)</div>

            </div>
          </div>
        </div>


        <div class="repay-group"  id="dataList">

        </div>

        <div v-if="!list_data || list_data.length == 0">
          <div class="default-page-img icon-common-no-data">
          </div>
          <div class="default-page-word">
            暂无数据
          </div>
        </div>

      </div>

      <div class="common-to-top "  style="display: none;">
        <div class="icon-common-to-top to-top-icon" onclick="pageScrollTwo()"></div>
      </div>
    </div>

    <tab-bar :active_index='1'></tab-bar>
  </div>

</template>

<script>
  import MeScroll from 'mescroll.js'
  import 'mescroll.js/mescroll.min.css'
  import tabBar from '@/components/TabBar'

  export default {
    data(){
      return {
        ptMescroll: null, //handle
        pdType: 1,//借款进行中0; 借款已完成1;
        list_data : null ,//列表数据
      };
    },
    mounted(){
      this.ptMescroll = new MeScroll("mescroll", {
        //上拉加载的配置项
        up: {
          callback: this.getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
          noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
          empty: {
            tip: "", //提示
          },
          htmlNodata: " ",
          isBounce: false,
          page: {
            num: 0, //当前页码,默认0,回调之前会加1,即callback(page)会从1开始
            size: 10, //每页数据的数量
            time: null //加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
          },
          clearEmptyId: "dataList" //相当于同时设置了clearId和empty.warpId; 简化写法;默认null
        }
      });
    },
    methods: {
      getListData(page){
        var self = this;
        // 联网加载数据
        this.getListDataFromNet(this.pdType, page.num, page.size, function (data, le) {
          //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
          // console.log(page);
          self.ptMescroll.endSuccess(le);//传参:数据的总数; mescroll会自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
          //设置列表数据
          if (page.num == 1) {
            self.setListData(data, 1);
            console.log(data)
            if(data && data.length > 0){ //有数据

            }else{ //无数据
              self.list_data = [];
            }
          } else {
             self.setListData(data, 2);
          }
        }, function () {
          //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          self.ptMescroll.endErr();
        });
      },
      /*设置列表数据*/
      setListData(data, num){
          if(Array.isArray(data)){
            this.list_data.push(data);//填充数据
          }
      },
      getListDataFromNet(pdType, pageNum, pageSize, successCallback, errorCallback){
        //延时一秒,模拟联网
        var flag = '2';
        if (flag != '1') {
          flag = '0';
        }
        var dataParam = {
          flag: flag,
          page: pageNum
        };
        var user = '';
        if (user == null || user == "") {
            successCallback(null, 0);
        } else {
          $.ajax({
            url: '/record/repay/getRepayList',
            data: dataParam,
            type: "post",
            success: function (data) {
              var myArray = [];
              console.log(myArray.length);
              var le = patch("repay-list", data);
              successCallback(data, le);
            },
            error: errorCallback
          });
        }

      }
    }
    ,
    watch: {}
    ,
    components: {
      tabBar
    }
  }

</script>
<style lang="scss">
  @import "../../assets/scss/variate";

  .icon-repay-base-banner {
    background-image: url("../../assets/images/repay/icon-repay-base-banner.png")
  }

  .icon-repay-stage {
    background-image: url("../../assets/images/repay/icon-repay-stage.png")
  }

  .temp{
    background-color: #f6f6f6;
    min-height: 100%;
  }


  .repay {
    //   padding-top: .9rem;
    margin-bottom: 3rem;
    .base-info {
      //position: sticky;
      //top: 0;
      //z-index: 100;
      height: 2.1rem;
      width: 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      .total-box {
        height: 100%;
        .total-list {
          color: #fff;
          .amount-explain {
            font-size: .3rem;
            margin-top: .24rem;
          }
          .amount-money {
            font-size: .36rem;
          }
        }
      }

    }
    .repay-group {
      min-height: 20px;
      .list-title {
        position: sticky;
        top: 0rem;
        background-color: $repay-bg;
        height: .8rem;
        line-height: .8rem;
        color: #666666;
        // font-weight: bold;
        font-size: .28rem;
        text-align: center;
        .time {
          margin-right: .2rem;
        }
        .money {
          color: $red-word;
        }
      }
      .list-content {
        .list-content-item {
          width: 7.2rem;
          height: 2.62rem;
          margin: 0 auto .2rem;
          border-radius: .04rem;
          background-color: #fff;
          box-shadow: 0 .08rem .08rem #eeeeee;
          .item-base-info {
            border-bottom: 1px solid $default-border;
            height: .8rem;
            display: flex;
            align-items: center;
            .term {
              display: inline-block;
              padding: .1rem .3rem;
              margin-left: .12rem;
              text-align: center;
              color: #fff;
              font-size: .28rem;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              background-position: center;
            }
            .term-title {
              color: $text-two-black;
              font-size: .28rem;
              margin-left: .4rem;
            }
          }
        }
        .item-detail {
          font-size: .3rem;
          color: $text-two-black;
          text-align: center;
          .detail-top {
            margin-top: .52rem;
          }
          .date {
            color: $red-word;
          }
          .explain {
            margin-top: .14rem;
          }
        }
      }
    }
  }


</style>
